<template>
    <div>
        <div class="lead-content">
            <!--面包屑-->
            <div class="breadcrumb">
                <Breadcrumb>
                    <BreadcrumbItem to="/">首页</BreadcrumbItem>
                    <BreadcrumbItem to="/resManage/newList">销售</BreadcrumbItem>
                    <BreadcrumbItem>新名单分配</BreadcrumbItem>
                </Breadcrumb>
            </div>
            <!--筛选条件-->
            <div class="setScreensBody">
                <!--<Tabs type="card" :animated="false" class="tabs" @on-click="changeTab">-->
                <!--<TabPane label="总KPI">-->
                <!--</TabPane>-->
                <!--<TabPane label="CC KPI"></TabPane>-->
                <!--<TabPane label="CR KPI"></TabPane>-->
                <!--</Tabs>-->
                <div class="setFilter">
                    <div class="setScreens">
                        <Poptip placement="bottom-end" width="305" v-model="visible">
                            <p class="setBtn"><i class="iconfont icon-shezhi1-copy"></i>筛选设置</p>
                            <div class="api chooseScreens" slot="content" ok-text="yes"
                                 cancel-text="no">
                                <p class="chooseTip">*设置要显示的筛选项*</p>
                                <CheckboxGroup v-model="checkAllGroup">
                                    <Checkbox label="香蕉香蕉"></Checkbox>
                                    <Checkbox label="苹果香蕉"></Checkbox>
                                    <Checkbox label="西瓜香蕉"></Checkbox>
                                    <Checkbox label="西香蕉"></Checkbox>
                                    <Checkbox label="西瓜2"></Checkbox>
                                    <Checkbox label="西瓜3"></Checkbox>
                                    <Checkbox label="西瓜4"></Checkbox>
                                    <Checkbox label="西瓜5"></Checkbox>
                                    <Checkbox label="西瓜6"></Checkbox>
                                    <Checkbox label="西瓜7"></Checkbox>
                                    <Checkbox label="苹果9"></Checkbox>
                                    <Checkbox label="西瓜10"></Checkbox>
                                    <Checkbox label="西瓜11"></Checkbox>
                                    <Checkbox label="西瓜12"></Checkbox>
                                    <Checkbox label="西瓜13"></Checkbox>
                                    <Checkbox label="西瓜14"></Checkbox>
                                    <Checkbox label="西瓜15"></Checkbox>
                                    <Checkbox label="西瓜16"></Checkbox>
                                    <Checkbox label="西瓜17"></Checkbox>
                                </CheckboxGroup>
                                <div class="clickBtn">
                                    <Button class="cancle" @click="close">取消</Button>
                                    <Button class="confirm" @click="ok" type="primary">确定</Button>
                                </div>
                            </div>
                        </Poptip>
                    </div>
                    <div class="allScreens" :class="{hidden:isHidden}">
                        <Form :model="formItem" :label-width="120" label-position="left">
                            <FormItem label="选择日期">
                                <DatePicker type="daterange" split-panels placeholder="   开始时间     至     结束时间"
                                            style="width: 200px"></DatePicker>
                            </FormItem>
                            <FormItem label="下拉框单选">
                                <Select v-model="formItem.select" style="width: 200px">
                                    <Option value="beijing">New York</Option>
                                    <Option value="shanghai">London</Option>
                                    <Option value="shenzhen">Sydney</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="下拉框多选">
                                <Select v-model="formItem.select2" multiple style="width:200px">
                                    <Option value="beijing">New York</Option>
                                    <Option value="shanghai">London</Option>
                                    <Option value="shenzhen">Sydney</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="单选">
                                <RadioGroup v-model="formItem.radio">
                                    <Radio label="male">Male</Radio>
                                    <Radio label="female">Female</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="多选">
                                <Checkbox
                                        :indeterminate="indeterminate"
                                        :value="checkAll"
                                        @click.prevent.native="handleCheckAll">全选
                                </Checkbox>
                                <CheckboxGroup style="display: inline-block;" v-model="checkAllGroup"
                                               @on-change="checkAllGroupChange">
                                    <Checkbox label="香蕉"></Checkbox>
                                    <Checkbox label="苹果"></Checkbox>
                                    <Checkbox label="西瓜"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" class="submit">确认查询</Button>
                            </FormItem>
                        </Form>
                        <p class="fold">
                                <span @click="foldScreen">
                                    更多筛选
                                    <Icon type="ios-arrow-down"/>
                                </span>
                        </p>
                    </div>
                </div>
                <!--表格-->
                <div class="tableContent">
                    <!--表格字段设置-->
                    <div class="tableSetting">
                        <div class="dataOperate">
                            <p>已选<span class="num">{{selectedNum}}</span>条数据 ：</p>
                            <p v-show="selectedNum > 0">
                                <Button>手动分配</Button>
                                <Button class="btn3">进垃圾池</Button>
                                <Button class="btn4">标记为已清洗</Button>
                            </p>
                        </div>
                        <div class="sortTables">
                            <div class="sortData">
                                <Select class="select1" v-model="tableSelect" style="width:120px">
                                    <Option v-for="(item,index) in tableSelectList" v-if="item.is_search==1"
                                            :key="index"
                                            :value="item.field_name">{{item.display_name }}
                                    </Option>
                                </Select>
                                <Select v-model="relation" style="width:110px">
                                    <Option v-for="(item,index) in relationList" :key="index" :value="item.key">
                                        {{item.value}}
                                    </Option>
                                </Select>
                                <Input style="width:180px" v-model="keywords" placeholder="请输入搜索内容"/>
                                <p class="emptyData" @click="emptyData"><i class="iconfont icon-shanchu1"></i></p>
                                <!--清空-->
                            </div>
                            <Button class="btnSearch" @click="relationClick"><i class="iconfont icon-sousuo"></i>
                            </Button>
                            <div class="setTables">
                                <!--字段设置-->
                                <Poptip placement="bottom-end" width="349" v-model="visible2">
                                    <p class="setBtn"><i class="iconfont icon-shezhi1-copy"></i>字段设置</p>
                                    <div class="api chooseScreens" slot="content" ok-text="yes" cancel-text="no">
                                        <p class="chooseTip">*设置要显示的字段*</p>
                                        <div class="checkALL">
                                            <Checkbox
                                                    :indeterminate="indeterminate2"
                                                    :value="checkAll2"
                                                    @click.prevent.native="handleCheckAll2">全选
                                            </Checkbox>
                                        </div>
                                        <CheckboxGroup v-model="tableVisible" @on-change="checkAllGroupChange2">
                                            <Checkbox v-for="(el,index) in tableFieldList" :label=index :key="index">
                                                {{el}}
                                            </Checkbox>
                                        </CheckboxGroup>
                                        <div class="clickBtn">
                                            <Button class="cancle" @click="close2">取消</Button>
                                            <Button class="confirm" @click="chooseDisplay" type="primary">确定</Button>
                                        </div>
                                    </div>
                                </Poptip>
                            </div>
                        </div>
                    </div>
                    <!--表格内容-->
                    <Table class="tableData" @on-selection-change="selectChange"
                           :columns="tableHeaders" :data="tableList"
                           border>
                    </Table>
                    <!--分页-->
                    <Page :total="pageTotal" show-sizer show-elevator @on-change="pageChange"
                          @on-page-size-change="pageSizeChange" show-total/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        filters: '',
        isHidden: false,
        selectedNum: 0,
        //筛选设置
        visible: false, //筛选设置是否隐藏
        indeterminate: true,//筛选设置checkBox全选
        checkAll: false,//筛选设置checkBox全选
        //字段设置
        visible2: false, //字段设置是否隐藏
        indeterminate2: true,//字段设置checkBox全选
        checkAll2: false,//字段设置checkBox全选
        tableSelect: '', //选择的表格筛选字段
        tableSelectList: [], //表格筛选条件
        tableFieldList: [], //所有可选择的table字段名称（字段设置里数据）
        tableVisible: [], //所有已选择的筛选条件的key（字段设置选中的值）
        tableHeaders: [
          {
            "type": "selection",
            "width": 60,
            "align": "center"
          },
          {
            "title": "学生姓名",
            "key": "name",
            "align": "center",
            "width": 120,
          },
          {
            "title": "手机号",
            "key": "mobile",
            "align": "center",
            "width": 156,
          },
          {
            "title": "年级",
            "key": "grade",
            "align": "center",
            "width": 180,
          },
          {
            "title": "科目",
            "key": "subject",
            "align": "center",
            "width": 180,
          },
          {
            "title": "报名时间",
            "key": "time",
            "align": "center",
            "width": 180,
          },
          {
            "title": "渠道等级",
            "key": "channelLevel",
            "align": "center",
            "width": 180,
          },
          {
            "title": "渠道名称",
            "key": "channelName",
            "align": "center",
            "width": 180,
          },
        ], //所有已选择的table字段(表格的表头数据)
        tableList: [
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          }
          ,
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          }
          ,
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          }
          ,
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          }
          ,
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          },
          {
            name:"小明",
            mobile:"18354679852",
            grade:"一年级",
            subject:"语文",
            time:"2018-1-3 00:00:00",
            channelLevel:"A",
            channelName:"微信"
          }

        ], //表格数据
        pageTotal: 0, //页码总数
        keywords: "",
        relation: "like",
        relationList: [
          {key: "like", value: "包含"},
          {key: ">", value: "大于"},
          {key: ">=", value: "大于等于"},
          {key: "=", value: "等于"},
          {key: "<", value: "小于"},
          {key: "<=", value: "小于等于"},
        ],
        formItem: {
          select: '',
          select2: '',
          radio: 'male',
          checkbox: [],
          date: '',
          time: ''
        },
        checkAllGroup: [],
        columns11: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '分类',
            key: 'name',
            align: 'center',
            width: 200
          },
          {
            title: 'Other',
            align: 'center',
          },
          {
            title: 'Company',
            align: 'center',
          },
          {
            title: 'Gender',
            key: 'gender',
            align: 'center',
            width: 200
          }
        ],
        data10: [],
        cityList: [
          {
            value: 'New York',
            label: 'New York'
          },
          {
            value: 'London',
            label: 'London'
          },
          {
            value: 'Sydney',
            label: 'Sydney'
          },
          {
            value: 'Ottawa',
            label: 'Ottawa'
          },
          {
            value: 'Paris',
            label: 'Paris'
          },
          {
            value: 'Canberra',
            label: 'Canberra'
          }
        ],
        model1: ''
      }
    },
    mounted() {

      const data = [];
      for (let i = 0; i < 20; i++) {
        data.push({
          key: i,
          name: 'John Brown',
          age: i + 1,
          street: 'Lake Park',
          building: 'C',
          door: 2035,
          caddress: 'Lake Street 42',
          cname: 'SoftLake Co',
          gender: 'M'
        })
      }
      this.data10 = data
    },
    methods: {
      //切换tab
      changeTab(name) {
        console.log(name);
      },
      //折叠隐藏面板
      foldScreen() {
        this.isHidden = !this.isHidden;
        console.log(this.isHidden);
      },
      //table选中checkBox
      selectChange(selection) {
        // console.log(selection.length);
        this.selectedNum = selection.length;
      },
      handleCheckAll() {
        if (this.indeterminate) {
          this.checkAll = false;
        } else {
          this.checkAll = !this.checkAll;
        }
        this.indeterminate = false;
        if (this.checkAll) {
          this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
        } else {
          this.checkAllGroup = [];
        }
      },
      checkAllGroupChange(data) {
        if (data.length === 3) {
          this.indeterminate = false;
          this.checkAll = true;
        } else if (data.length > 0) {
          this.indeterminate = true;
          this.checkAll = false;
        } else {
          this.indeterminate = false;
          this.checkAll = false;
        }
      },
      //字段设置,点击确定
      chooseDisplay() {
        this.visible2 = false
        // console.log(this.tableVisible);
        this.$axios.post(this.api.chooseDisplayAPI, {
          setting_data: this.tableVisible,
          tab: this.api.tab,
        }).then(res => {
          this.getTableDisplay();
        });
      },
      //关闭字段设置
      close2() {
        this.visible2 = false
      },
      //字段设置点击全选
      handleCheckAll2() {
        if (this.indeterminate2) {
          this.checkAll2 = false;
        } else {
          this.checkAll2 = !this.checkAll2;
        }
        this.indeterminate2 = false;

        if (this.checkAll2) {
          // console.log(Object.keys(this.filtersList).length);
          for (let i in this.tableFieldList) {
            this.tableVisible.push(i);
          }
        } else {
          this.tableVisible = [];
        }
        // console.log(this.filterVisible);
      },
      //字段设置点击checkBox
      checkAllGroupChange2(data) {
        console.log(data.length);
        console.log(Object.keys(this.tableFieldList).length);
        if (data.length === Object.keys(this.tableFieldList).length) {
          this.indeterminate2 = false;
          this.checkAll2 = true;
        } else if (data.length > 0) {
          this.indeterminate2 = true;
          this.checkAll2 = false;
        } else {
          this.indeterminate2 = false;
          this.checkAll2 = false;
        }
      },
      ok() {
        this.visible = false
        this.$Message.info('You click ok');
      },
      close() {
        this.visible = false
      },
      ok2() {
        this.visible2 = false
        this.$Message.info('You click ok')
      },
      //点击清空搜索数据，获取表格数据
      emptyData() {
      },
      //点击搜索,获取表格数据
      relationClick() {

      },
      //页码改变
      pageChange(page) {
        this.formItem.page = page;
        this.getTableData();
      },
      //页码size改变
      pageSizeChange(pageSize) {
        console.log(pageSize);
        this.formItem.size = pageSize;
        this.getTableData();
      },
    },
    components: {},
  }
</script>
<style lang="less" scoped>
    /*@import "../../assets/css/standard";*/


</style>
